<template>
  <div>
    <el-table
      :data="choices"
      stripe 
      style="margin: 20px auto;"
    >
      <el-table-column label="学生姓名" prop="student_name"/>
      <el-table-column label="第一志愿" prop="first_choice_instructor_name"/>
      <el-table-column label="第二志愿" prop="second_choice_instructor_name"/>
      <el-table-column label="第三志愿" prop="third_choice_instructor_name"/>
      <el-table-column align="right" label="操作" width="200px">
        <template #default="scope">
          <el-button 
            size="small" 
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-button>
          <el-button 
            size="small" 
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

		<!-- 编辑任务页面 -->
		<el-dialog
			title="填写志愿"
			v-model="edit_dialog_visible"
			width="30%"
		>
			<el-form
				ref="editFormRef"
				:model="form"
				status-icon
				label-width="120px"
				class="demo-ruleForm"
			>
				<!-- <el-form-item label="学生ID" prop="student_id">
					<el-input v-model="form.student_id" autocomplete="off"/>
				</el-form-item> -->
				<el-form-item label="第一志愿导师">
					<el-select v-model="form2.first_choice_instructor" placeholder="请选择">
						<el-option
							v-for="tutor in tutors"
							:key="tutor[0]"
							:label="tutor[1]"
							:value="tutor[0]"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="第二志愿导师">
					<el-select v-model="form2.second_choice_instructor" placeholder="请选择">
						<el-option
							v-for="tutor in tutors"
							:key="tutor[0]"
							:label="tutor[1]"
							:value="tutor[0]"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="第三志愿导师">
					<el-select v-model="form2.third_choice_instructor" placeholder="请选择">
						<el-option
							v-for="tutor in tutors"
							:key="tutor[0]"
							:label="tutor[1]"
							:value="tutor[0]"
						/>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitEditForm(editFormRef)">提交</el-button>
					<el-button @click="resetForm(editFormRef)">重置</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
  </div>
</template>

<script setup>
import {RouterView,RouterLink} from 'vue-router'
import { onMounted, reactive, ref } from 'vue';
import axios from 'axios';
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

const choices = ref([])
const getChoices = () =>{
  const token = sessionStorage.getItem('token')
  axios.get("http://127.0.0.1:5000/choices", {
      headers: {
          Authorization: `Bearer ${token}`
      }
  }).then(res => {
      // console.log(res);
      console.log(res.data)
      choices.value = res.data
  })
}

const getChoice = () =>{
  const token = sessionStorage.getItem('token')
  axios.get(`http://127.0.0.1:5000/choices/${counter.user_id}`, {
      headers: {
          Authorization: `Bearer ${token}`
      }
  }).then(res => {
      // console.log(res);
      console.log(res.data)
      choices.value = res.data
  })
}

onMounted(() => {
	if(counter.role_id == 8) {
		getChoices()
    }
    else {
		getChoice()	
    }
})

const tutors = ref([])
const get_tutor = (student_id) => {
	axios.get(`http://localhost:5000/get_tutors/${student_id}`, {
		headers: {
			Authorization: `Bearer $token`
		}
	}).then((res) => {
		tutors.value = res.data; 
	})
}

// 编辑表单
const edit_dialog_visible = ref(false)
const handleEdit = (index, row) => {
	// clearForm()
	console.log(index, row);
	form2.first_choice_instructor = row.first_choice_instructor
	form2.second_choice_instructor = row.second_choice_instructor
	form2.third_choice_instructor = row.third_choice_instructor
	form2.first_choice_instructor_name = row.first_choice_instructor_name
	form2.second_choice_instructor_name = row.second_choice_instructor_name
	form2.third_choice_instructor_name = row.third_choice_instructor_name
	form2.student_id = row.student_id
	form2.student_name = row.student_name
	console.log(form2)
	form2.id = row.id
	for(let key in row) {
		form[key] = row[key]
	}
	edit_dialog_visible.value = true
	get_tutor(row.student_id)
}

// 添加表单
const add_dialog_visible = ref(false)


const editFormRef = ref()
const form = reactive({
	id: "",
	first_choice_instructor: '',
	first_choice_instructor_name: '',
	second_choice_instructor_name: '',
	third_choice_instructor_name: ''
})

const form2 = reactive({
	id: '',
	first_choice_instructor: '',
	first_choice_instructor_name: '',
	second_choice_instructor: '',
	second_choice_instructor_name: '',
	third_choice_instructor: '',
	third_choice_instructor_name: '',
	student_id: '',
	student_name: ''
})

const clearForm = () => {
      form2.id = '';
      form2.first_choice_instructor = '';
      form2.second_choice_instructor = '';
      form2.third_choice_instructor = '';
    };

const submitEditForm = (formEl) => {
	const token = sessionStorage.getItem('token')
	axios.put(`http://localhost:5000/choices/${form2.id}`, form2, {
		headers: {
			Authorization: `Bearer ${token}`
		}
	}).then((res) => {
		formEl.resetFields()
		edit_dialog_visible.value = false
		if(counter.role_id == 8) {
			getChoices()
		}
		else {
			getChoice()	
		}
	})
}


// 重置表单
const resetForm = (formEl) => {
	formEl.resetFields()
}

</script>

<style scoped>

</style>
